﻿
@{
    ViewBag.Title = "EmployeePageList";
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
@section css{
    <link rel="stylesheet" href="~/assets/portal/assets/css/common.css" />
    <link rel="stylesheet" href="~/bussiness/js/base/reset.css" />
    <style>
        .ant-select-arrow, .ant-select-clear {
            position: absolute;
            right: 10px;
        }
        .ant-tag-hidden{
            display:block!important;
        }
        /* 定义阴影样式 */
        .bottom-shadow {
            position: sticky; /* 使用 sticky 定位，保证吸底 */
            bottom: 0;
            left: 0;
            width: 100%;
            background:red;
            z-index:999;
            height: 4px; /* 阴影高度 */
            /* 使用 box-shadow 属性创建阴影效果 */
            box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
            background: transparent;
            pointer-events: none; /* 确保阴影不影响鼠标事件 */
            /* 添加过渡效果，让显示和隐藏更平滑 */
            transition: opacity 0.3s ease;
            opacity: 1;
        }
        .scroll-container {
            max-height: 700px;
            width: 100%;
            overflow-y: scroll;
            position: relative
        }

    </style>
}
<div id="PPESupplyConfig" class="font-['SourceHanSansSC']">
    <a-style-provider hash-priority="high">
        <a-config-provider :locale="vlocale">
            <a-image :width="200"
                     :style="{ display: 'none',zIndex:100 }"
                     :preview="{visible:PPESupplyConfigParams.previewShow.value,onVisibleChange:PPESupplyConfigParams.setVisible}" :src="PPESupplyConfigParams.imgUrl.value"></a-image>
            <m-pdf-pop-model></m-pdf-pop-model>
            <a-modal v-model:open="PPESupplyConfigParams.templateOpen.value" width="60%" height="500px" :title="{0:'新增用品配置',1:'修改用品配置',2:'用品配置详情',3:'用品编码配置'}[PPESupplyConfigParams.opType.value]" v-on:ok="PPESupplyConfigParams.handleOk">
                
                <div>
                    <a-spin :spinning="PPESupplyConfigParams.uploadLock.value" tip="加载中，请耐心等待" />
                    <template v-if="PPESupplyConfigParams.opType.value!=3">
                        <a-form layout="inline"
                                style="margin-top:40px"
                                ref="AddOrEditForm"
                                :rules="PPESupplyConfigParams.configData.FormRule"
                                :model="PPESupplyConfigParams.configData.value">
                            <a-form-item label="用品名称" required name="name">
                                <a-input v-model:value="PPESupplyConfigParams.configData.value.name" :disabled="PPESupplyConfigParams.opType.value==2||PPESupplyConfigParams.cIsEdit.value" placeholder="请选择用品名称">

                                </a-input>
                            </a-form-item>
                            <a-form-item style="margin: 0px 20px" label="类型" required name="type">

                                <a-select v-model:value="PPESupplyConfigParams.configData.value.type"
                                          show-search
                                          :disabled="PPESupplyConfigParams.opType.value==2||PPESupplyConfigParams.cIsEdit.value"
                                          placeholder="请选择类型"
                                          style="width:220px;"
                                          :options="PPESupplyConfigParams.configData.value.options"
                                          :filter-option="PPESupplyConfigParams.filterOption"
                                          v-on:change="PPESupplyConfigParams.handleTypeChange"></a-select>

                            </a-form-item>
                            <a-form-item label="单位" required name="unit">

                                <a-input :disabled="PPESupplyConfigParams.opType.value==2||PPESupplyConfigParams.cIsEdit.value" style="width:250px" v-model:value="PPESupplyConfigParams.configData.value.unit" placeholder="请填写单位">

                                </a-input>
                            </a-form-item>


                        </a-form>
                        <div   style="display:flex;align-items:flex-start;margin-top:15px">
                            <div ref="tc"></div>
         
                            <div style="color: #383838; font-weight: 600; font-size: 14px ">用品规格:</div>

                            <div ref="scrollt" v-on:scroll="PPESupplyConfigParams.scrollt" style=" max-height:300px; overflow-y: scroll; position: relative">


                                <div v-on:mouseover="PPESupplyConfigParams.enter(i)"  style="width: 854px;flex-shrink:0; margin-bottom:20px; height: 126px; border: 1px solid #d1d6df; margin-left: 10px" v-for="(e,i) in PPESupplyConfigParams.configData.value.specification">
                                    <div style="width: 100%; height: 48px; background: #f8f8f8;display:flex; justify-content:space-between; align-items:center;padding:0 12px;">
                                        <div>  <a-input :disabled="PPESupplyConfigParams.opType.value==2||PPESupplyConfigParams.cIsEdit.value" style="width:300px" v-model:value="e.name" placeholder="请输入规格名称，比如颜色，尺码等" /></div>
                                        <div v-if="PPESupplyConfigParams.opType.value!=2">
                                            <div v-if="i==0" style="background: #1677ff; font-size: 20px; color: #fff; border-radius: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; padding-bottom: 3px;" v-on:click="PPESupplyConfigParams.addItemConfig">+</div>
                                            <div v-else v-on:click="PPESupplyConfigParams.delItemConfig(i)" style="background: red;font-size: 20px; color: #fff; border-radius: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; padding-bottom: 3px;">x</div>
                                        </div>
                                    </div>
                                    <div style="height: calc(100% - 48px); width: 800px; display: flex; align-items: center; padding-left: 16px; box-sizing: border-box;  overflow-y: scroll ">
                                        <template v-for="(tag, index) in e.tags" :key="index">



                                            <a-input v-if="PPESupplyConfigParams.cIsEdit.value&&PPESupplyConfigParams.cindex.value==i&&PPESupplyConfigParams.ccindex.value==index"
                                                     v-model:value="PPESupplyConfigParams.editres.value"
                                                     type="text"
                                                     :disabled="PPESupplyConfigParams.opType.value==2"
                                                     size="small"
                                                     style="flex-shrink:0"
                                                     :style="{ width: '78px',marginRight:'12px' }"
                                                     :ref="'cctest'+i"
                                                     v-on:blur="PPESupplyConfigParams.handletest"

                                                     v-on:keyup.enter="PPESupplyConfigParams.handletest">
                                            </a-input>

                                            <div v-else>
                                                <a-tooltip v-if="tag.label.length > 10" :title="tag.label">

                                                    <a-tag v-else :closable="PPESupplyConfigParams.opType.value!=2" v-on:dblclick="PPESupplyConfigParams.handleDbclick(i,index)" v-on:close="PPESupplyConfigParams.handleClose(tag,i)">
                                                        {{ `${tag.label.slice(0, 10)}...` }}
                                                    </a-tag>
                                                </a-tooltip>

                                                <a-tag v-else :closable="PPESupplyConfigParams.opType.value!=2" v-on:dblclick="PPESupplyConfigParams.handleDbclick(i,index)" v-on:close="PPESupplyConfigParams.handleClose(tag,i)">
                                                    {{ tag.label }}
                                                </a-tag>


                                            </div>


                                        </template>
                                        <a-input v-if="e.inputVisible"
                                                 v-model:value="e.inputValue"
                                                 type="text"
                                                 size="small"
                                                 :disabled="PPESupplyConfigParams.opType.value==2"
                                                 :ref="'addInput'+i"
                                                 style="flex-shrink:0"
                                                 :style="{ width: '78px',marginRight:'12px' }"
                                                 v-on:blur="PPESupplyConfigParams.handleInputConfirm"
                                           
                                                 v-on:keyup.enter="PPESupplyConfigParams.handleInputConfirm"></a-input>
                                        <div v-if="PPESupplyConfigParams.opType.value!=2">
                                            <a-tag v-if="PPESupplyConfigParams.cIsEdit.value == false" style="background: #fff; border-style: dashed;cursor:pointer" v-on:click="PPESupplyConfigParams.showInput">
                                                + 添加
                                            </a-tag>
                                            <a-tag v-if="PPESupplyConfigParams.cIsEdit.value == true&&PPESupplyConfigParams.cindex.value==i" color="#108ee9" style="cursor:pointer" v-on:click="PPESupplyConfigParams.showInput">
                            完成
                        </a-tag>
                                        </div>
                                    </div>
                                </div>

                                <div v-show="PPESupplyConfigParams.shadowShow.value" class="bottom-shadow"></div>

                            </div>
                        </div>
                        <div style="display:flex;align-items:flex-start;margin-top:15px">
                            <div style="color: #383838; font-weight: 600; font-size: 14px;margin-right:10px">防护功能:</div>
                            <div>
                                <a-textarea    :disabled="PPESupplyConfigParams.opType.value==2||PPESupplyConfigParams.cIsEdit.value" v-model:value="PPESupplyConfigParams.configData.value.Remark" style="width:850px" placeholder="" :auto-size="{ minRows: 4, maxRows: 10 }" />
                            </div>
                        </div>
                        <div style="display:flex;align-items:flex-start;margin-top:15px">
                            <div style="color: #383838; font-weight: 600; font-size: 14px;margin-right:10px">用品备注:</div>
                            <div>
                                <a-textarea    :disabled="PPESupplyConfigParams.opType.value==2||PPESupplyConfigParams.cIsEdit.value" v-model:value="PPESupplyConfigParams.configData.value.Description" style="width:850px" placeholder="" :auto-size="{ minRows: 4, maxRows: 10 }" />
                            </div>
                        </div>
                        <div style="display:flex;align-items:flex-start;margin-top:15px">
                            <div style="color: #383838; font-weight: 600; font-size: 14px">用品图片:</div>
                            <div>
                                <div class="clearfix" style="margin-left:14px">
                                    <a-upload v-model:file-list="PPESupplyConfigParams.uploadImg.value.fileList"
                                              action="#"
                                              :item-render="PPESupplyConfigParams.itemRender.value"
                                              v-on:change="PPESupplyConfigParams.handleChange">

                                        <a-button v-if="PPESupplyConfigParams.opType.value!=2&&PPESupplyConfigParams.uploadImg.value.fileList.length < 8" type="primary">+ 上传图片</a-button>

                                    </a-upload>
                                    <a-modal :open="PPESupplyConfigParams.uploadImg.value.previewVisible" :title="PPESupplyConfigParams.uploadImg.value.previewTitle" :footer="null" v-on:cancel="PPESupplyConfigParams.handleCancel">
                                        <img alt="" style="width: 100%" :src="PPESupplyConfigParams.uploadImg.value.previewImage" />
                                    </a-modal>
                                </div>
                            </div>
                        </div>

                    </template>
                    <template v-else>
                        <div style="display: flex; align-items: center; margin-top: 20px;">
                            <a-form-item label="用品名称" style="margin-right:20px" name="name">
                                <a-input v-model:value="PPESupplyConfigParams.configData.value.name" disabled style="width:150px" :disabled="PPESupplyConfigParams.opType.value==2" placeholder="请填写用品名称">

                                </a-input>
                            </a-form-item>
                            <a-form-item label="用品类型" name="name">
                                <a-input v-model:value="PPESupplyConfigParams.configData.value.name" disabled style="width:150px" :disabled="PPESupplyConfigParams.opType.value==2" placeholder="请填写用品类型">

                                </a-input>
                            </a-form-item>
                        </div>
                
                        <a-form layout="inline"
                                v-for="(e,i) in 19"
                                style="margin-top:20px;"
                                ref="setForm"
                                :rules="PPESupplyConfigParams.configData.FormRule"
                                :model="PPESupplyConfigParams.configData.value">

                            <div></div>
                            <a-form-item style="margin: 0px 0px" label="序号" name="type">
                                <div style="font-weight:bolder">{{i+1}}</div>  
                            </a-form-item>
                                <a-form-item style="margin: 0px 0px" label="属性" required name="type">

                                    <a-select v-model:value="PPESupplyConfigParams.configData.value.type"
                                              show-search
                 
                                              placeholder="请选择属性"
                                              style="width:220px;"
                                              :options="PPESupplyConfigParams.configData.value.options"
                                              :filter-option="PPESupplyConfigParams.filterOption"
                                              v-on:change="PPESupplyConfigParams.handleTypeChange"></a-select>

                                </a-form-item>
                                <a-form-item style="margin: 0px 0px" label="属性值" required name="type">
                                    <a-select v-model:value="PPESupplyConfigParams.configData.value.type"
                                              show-search
     
                                              placeholder="请选择属性值"
                                              style="width:220px;"
                                              :options="PPESupplyConfigParams.configData.value.options"
                                              :filter-option="PPESupplyConfigParams.filterOption"
                                              v-on:change="PPESupplyConfigParams.handleTypeChange"></a-select>

                                </a-form-item>
                                <a-form-item label="编码" required name="unit">
                                    <a-input :disabled="PPESupplyConfigParams.opType.value==2" style="width:250px" v-model:value="PPESupplyConfigParams.configData.value.unit" placeholder="请填写单位">

                                    </a-input>
                                </a-form-item>
                                <a-form-item>
                                    <div v-if="i==0" style="background: #1677ff; font-size: 20px; color: #fff; border-radius: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; padding-bottom: 3px;" v-on:click="PPESupplyConfigParams.addItemConfig">+</div>
                                    <div v-else v-on:click="PPESupplyConfigParams.delItemConfig(i)" style="background: red;font-size: 20px; color: #fff; border-radius: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; padding-bottom: 3px;">x</div>
                                </a-form-item>
                
                        </a-form>
                    </template>
       
                </div>



            </a-modal>
            <header class="px-5 box-border">
                <div class="flex items-center">
                    <div class="w-full h-[48px] text-[13px]  rounded-lg mx-auto my-[10px]  bg-white  text-[#888888] text-3xl flex items-center px-10">   <div class="w-22 h-22 bg-blue-200 mr-5"> <img class="w-full h-full cursor-pointer" v-on:click="PPESupplyConfigParams.vvback()" src="~/Assets/nimgs/exit.png" alt="返回" /></div> <span class="text-[]">信息门户<span class="mx-2">/</span>劳防用品<span class="mx-2">/</span><span class="text-[#424758] text-[15px]">用品配置</span> </span>  </div>
                </div>
                <div style="padding:20px;padding-top:16px; box-sizing:border-box" class="w-full h-min-[108px]  bg-white">
                    <div class="mb-5 text-[16px] font-bold text-black">筛选条件</div>
                    <a-row>

                   


                        <a-form layout="inline"
                                :model="PPESupplyConfigParams.queryParams.value">
                            <a-form-item label="用品名称">
                                <a-input v-model:value="PPESupplyConfigParams.queryParams.value.ProductName" allow-clear placeholder="请输入用品名称" />
                            </a-form-item>

                            <a-form-item label="类型">
                                <a-select ref="select" allow-clear
                                          placeholder="请选择类型"
                                          :options="PPESupplyConfigParams.configData.value.options"
                                          v-model:value="PPESupplyConfigParams.queryParams.value.TypeId"
                                          style="width:150px">

                                </a-select>
                            </a-form-item>

                            <a-form-item>
                                <a-col><a-button v-on:click="PPESupplyConfigParams.handleQuery" type="primary">查询</a-button></a-col>
                            </a-form-item>

                        </a-form>




                    </a-row>



                    <div class="flex w-full mt-10">
                        <a-card :bordered="true" class="w-full  mt-12">
                            <template #title>
                                <div class="w-full flex justify-between items-center">
                                    <div class="flex items-center"> <div>用品配置</div> <div class="ml-7"><a-tag color="#108ee9">总数:{{PPESupplyConfigParams.pagination.value.total}}</a-tag></div></div>

                                    <a-button v-on:click="PPESupplyConfigParams.addConfig" type="primary">新增</a-button>
                                </div>



                            </template>


                            <a-table :pagination="PPESupplyConfigParams.pagination.value" :loading="PPESupplyConfigParams.pagination.value.loading" v-on:change="PPESupplyConfigParams.handleTableChange" :data-source="PPESupplyConfigParams.dataSource.value" :columns="PPESupplyConfigParams.columns.value">

                            </a-table>

                        </a-card>

                    </div>

                </div>
            </header>
        </a-config-provider>
    </a-style-provider>
</div>
@section Js{
    <script src="~/bussiness/js/base/tailwind.js"></script>
    <script type="module">
        import Composition from '../../bussiness/js/pg/PPE/SupplyConfig.js?v=@DateTime.Now.ToString("yyyyMMddHHmm")'
        import localeValues from '../../Bussiness/js/base/es/locale/zh_CN.js'
        singalApp('PPESupplyConfig', Composition, localeValues)
    </script>
}
